﻿
@{
    ViewData["Title"] = "Tree1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="template"></table>
            <script type="text/html" id="template">
                {{#  if(d.Pid == 0){ }}
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add"><i class="fa fa-plus"></i> 添加</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="fa fa-edit"></i> 编辑</a>
                {{# } else {}}
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add"><i class="fa fa-plus"></i> 添加</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="fa fa-times"></i> 删除</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="fa fa-edit"></i> 编辑</a>
                {{# } }}
            </script>

        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['table', 'treetable'], function () {
        var table = layui.table;
        var treetable = layui.treetable;
        var $ = layui.jquery;
        // 渲染表格
        console.log(table, treetable)
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'Id',
            treePidName: 'Pid',
            elem: '#munu-table',
            url: '/json/menulist.json',
            page: false,
            cols: [[
                { field: 'Code', title: '序号', width: 60, unresize: true, align: 'center', templet: '<div>{{d.LAY_TABLE_INDEX + 1}}</div>' }
                , {
                    field: 'Name', align: 'center', title: '菜单名称', width: 250, templet: function (d) {
                        return '<span class="text-filter">' + d.Name + '</span>'   //length<=10
                    }
                }
                , { title: '操作', align: 'center', width: 220, templet: '#template' }
                
                , {
                    field: 'Url', align: 'center', width: 250, title: '地址栏', templet: function (d) {
                        return "<a class='tips-block' id=" + d.LAY_INDEX + " href='javascript:urlTips(" + JSON.stringify(d.Url) + "," + d.LAY_INDEX + ")'>" + d.Url + "</a>";
                    }
                }
                , {
                    field: 'Icon', align: 'center', width: 80, title: '图标', templet: function (d) {
                        var str = 'layui-icon ' + d.Icon;
                        return "<i class='" + str + "'></i>";
                    }
                }
                , { field: 'Id', align: 'center', width: 110, title: 'Id' }
                , { field: 'Pid', align: 'center', width: 110, title: 'Parent' }
                , { field: 'Sort', align: 'center', width: 110, title: '排序' }

                , {
                    field: 'Enabled', align: 'center', width: 90, title: '是否启用', templet: function (d) {
                        if (d.Enabled) {
                            return '<span style="color:#01AAED">是</span>'
                        } else {
                            return '<span style="color:#ff5722">否</span>'
                        }
                    }
                }
                , {
                    field: 'Hidden', align: 'center', width: 90, title: '是否显示', templet: function (d) {
                        if (d.Hidden) {
                            return '<span style="color:#01AAED">是</span>'
                        } else {
                            return '<span style="color:#ff5722">否</span>'
                        }
                    }
                }
                , { field: 'Add_on', align: 'center', width: 200, title: '创建时间' }
                , { field: 'Edit_on', align: 'center', width: 200, title: '上次更新时间' }
                , { field: 'UserName', align: 'center', width: 130, title: '创建人' }
            ]],
            done: function (res) {
                console.log(res)
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
            }
        });
    });
</script>

